import React, { useCallback } from 'react';
import Taro from '@tarojs/taro'
import { Analytic_Type } from '@CONSTANTS/analytic'
import DBConfig from '@CONFIG/DBConfig';
import Images from '@ASSET/Images';
import { Image, Text, View } from '@tarojs/components';
import { openPage } from '@UTILS/common'
import style from './SpecialTopicCard.module.scss'

const SpecialTopicCard = ({
  data, language = 'zh', containerClass = '', bgImage = ''
}) => {
  const {
    Title, RouteType, RouteData, BannerFileName
  } = data || {}
  const title = Title?.[language]
  const onClick = useCallback(() => {
    openPage(RouteType, RouteData)
    Taro.tracker.trackEvent(Analytic_Type.tap_home_topic.eventId, { title })
  }, [RouteData, RouteType, title])
  const src = BannerFileName?.[language]
    ? `${DBConfig.staticBannerImageUrl}${BannerFileName?.[language]}`
    : Images.avatar
  return (
    <View className={`${style.topicCard} ${containerClass} `} onClick={onClick}>
      <View className={style.topicBgContainer}>
        <Image src={bgImage || src} className={style.topicBg} mode="aspectFill" />
      </View>
      {bgImage && <Text className={style.topicTitle}>{title}</Text>}
    </View>
  )
}

export default SpecialTopicCard
